<template>
	<view>
		<view class="wrapper_top">
			<view class="top_text">
				<view class="text_L">
					<image src="@/static/images/maintain/planicon.png" mode=""></image>
					<text>任务:</text>
				</view>
				<view class="text_R">
					<text>{{objInfo.planCheckName || "--"}}</text>
					<text class="text_year">{{objInfo.auditType === 2?'年审梯':'非年审梯'}}</text>
					<text>{{objInfo.buildingAddress || "--"}}</text>
				</view>
			</view>
			<view class="top_textDow">
				<view class="textDow1">当前计划日期</view>
				<view class="textDow2" :style="{color:defertType === 4 ? '#e02020;':'#0091ff;'}" >{{defertPlanDate || objInfo.planDate || '--'}}</view>
				<view class="textDow3" v-if="dataArray.length > 1">
					<block v-if="objInfo.deferType != 3">
						与初始计划日期相比
						<text v-if="dataArray[0].defertType === 1 || dataArray[0].defertType === 2">{{dateDays?(stateText?'整体延期':'整体提前'):'日期无变化' }}{{dateDays||''}}</text>
						<!-- <text v-if="dataArray[0].defertType === 2" {{stateText?'整体延期':'整体提前'}}{{dateDays||'无变化'}}</text> -->
						<text :style="{color:dataArray[0].defertType === 4?'#e02020':''}" v-if="dataArray[0].defertType === 4 || dataArray[0].defertType === 3" >{{dateDays?'整体延期'+dateDays:'日期无变化'}}</text>
					</block>
				 </view>
			</view>
		</view>
		<view style="text-align: center;margin: 20rpx 0;color: #999;font-size: 26rpx;" >计划日期调整记录</view>
		<view class="step_log">
			<view class="log_tit" v-if="dataArray.length > 1">
				<view class="tit1" >调整日期</view>
				<view class="tit2" >操作信息</view>
			</view>
			<view class="" v-if="dataArray.length > 1">
				<stepInfos :dataList="dataArray" @seeClick="seeClick" :leftShow="true" ></stepInfos>
			</view>
			<view class="step_empty" v-if="dataArray.length <= 1">
				<image src="@/static/images/default.png"></image>
				<text>暂无调整记录</text>
			</view>
			
		</view>
			
		<!-- 调整证明 -->
		<uni-popup ref="logPopup" :mask-click="true" type="bottom" @change="changePopUp">
			<view class="calendarEdit">
				<view class="edit_bor" @click="$refs.logPopup.close()"> <view class="down-btn"></view> </view>
				<view class="edit_content">
					<view class="content_tit"> {{reaType === 1?'调整原因':'调整证明'}} </view>
					<view class="top_text">
						<view class="text_L">
							<image src="@/static/images/maintain/planicon.png" mode=""></image>
							<text class="text1">任务:</text>
						</view>
						<view class="text_R nowap">
							<text>{{objInfo.planCheckName || "--"}}</text>
							<text class="text_year">{{objInfo.auditType === 2?'年审梯':'非年审梯'}}</text>
							<text>{{objInfo.buildingAddress || "--"}}</text>
						</view>
					</view>
					<view class="content_texts">
						<text>{{["初始计划","提前保养","延期保养","延期保养","特殊延期"][objItem.defertType]}}日期至:</text>
						<text :style="{color:defertType === 4 || objItem.defertType === 4 ? '#e02020;':'#0091ff;'}">{{defertPlanDate}}</text>
					</view>
					<view class="content_lines"></view>
					<view class="calendar_reason">
						<view class="reason_img">
							<view class="title">
								<text>{{reaType === 1?'日期调整原因':'调整证明'}}</text> 
								<text v-if="reaType === 2" style="color:red;">*</text>
								<text v-if="reaType === 2" style="color: #999;font-size: 24rpx;font-weight: 400;">(最多可上传9张图片)</text>
							</view>
							<view v-if="reaType === 1" style="margin-top: 20rpx;" >
								<!-- {{reasonText}} -->
								<view class="remarks">
									<textarea
										type="textarea"
										v-model="reasonTextStr"
										height="208rpx"
										placeholder="请输入调整日期的原因"
										placeholder-class="textare"
										style="font-size: 28rpx;height:208rpx;"
										maxlength="300"
									/> 
									<view class="length">{{ reasonTextStr.length >= 300?'300/300':reasonTextStr.length + '/300' }}</view>
								</view>	
							</view>
							<view class="parts_img" v-if="reaType === 2" >
								<imageDragSort 
								max="9" 
								:list="imgUrls" 
								:delayTypes="false"
								:isVideoShow="false"
								@changeList="changeImg"
								tips="上传图片"
								></imageDragSort>
							</view>	
							
						</view>
					</view>	
					
				</view>
				<view class="BA_item_botm calendar_btt" >
					<view :class="resultCont?'botm':'botm botms'" @click="submitProve">{{reaType === 1?'提交原因':'提交证明'}}</view>
				</view>
			</view>
		</uni-popup>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import stepInfos from './components/stepInfos.vue';
import imageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import {annualListLogs,updataAnnualSave} from '@/apis/project.js';
import {formatSeconds} from '@/utils/utils.js';
import {
	getPlanDetail,
} from '@/apis/workOrder.js';
import dayjs from 'dayjs';
import { mapState } from 'vuex';
export default {
	components:{
		stepInfos,
		imageDragSort
	},
	data() {
		return {
			reaType:1,
			dataArray:[],
			objInfo:{},
			planId:'',
			defertPlanDate:'',// 当前计划日期
			dateDays:'',// 天数
			imgUrls:[],
			reasonText:'',// 调整原因文本
			reasonTextStr:'',
			defertType:0,
			curPlanID:'',
			stateText:false,// 文字提前还是延期状态
			objItem:{},// 查看数据
			planDetail:{},
			resultCont:true,
		};
	},
	computed:{
		...mapState('user', ['userinfo']),
	},
	onLoad(opt) {
		let obj = JSON.parse(opt.needObj || '{}'); 
		if (Object.keys(obj).length > 0) {
			this.planId = obj.planId;
			obj.planDate = obj.planDate.substring(0,10).replaceAll('-','/');
			this.objInfo = obj;
			this.initGetListLogs();
			this.getPlanDetail();
		}
	},
	methods:{
		changePopUp(e) {
			console.log('showddd',e);
			if (!e.show) {
				this.reasonTextStr = '';
			}
		},
		// 调整原因 调整证明
		// reasonClick(type){
		// 	this.reaType = type
		// 	this.$refs.logPopup.open()
		// },
			
		// 调整原因 调整证明
		seeClick(obj,type) {
			this.reaType = type;
			this.curPlanID = obj.id;
			this.objItem = obj;
			if (type === 1) {
				// this.reasonText = str
				this.reasonTextStr = obj.defertDesc || '';
			}
			if (type === 2) {
				// this.reasonText = str
				if (obj.defertImg) {
					let imgArr = obj.defertImg.split(',');
					this.imgUrls = imgArr.map((item)=>{
						return {
							url:item,
							type:['mp4'].includes(item.substring(item.lastIndexOf('.') + 1)) ? 'video' : 'image'
						};
					});
				}
			}
			// 只有自己的任务
			if (this.planDetail.users && this.planDetail.users.length > 0) {
				// let result = this.planDetail.users.some((item)=>item.userId === this.userinfo.user_id)
				this.resultCont = this.planDetail.users.some((item)=>item.userId === this.userinfo.user_id);
			}
			this.$refs.logPopup.open();
		},
		// 提交证明
		submitProve() {
			if (!this.resultCont) {
				return;
			}
				
			let resObj = {
				id:this.curPlanID,
			};
			if (this.reaType === 1) {
				// this.$refs.logPopup.close()
				if (this.reasonTextStr.length <= 0) {
					uni.showToast({
						title: '请输入原因',
						icon: 'none'
					});
					return;
				}
				resObj.defertDesc = this.reasonTextStr;
			}
			if (this.reaType === 2) {
				if (this.imgUrls.length <= 0) {
					uni.showToast({
						title: '请上传图片',
						icon: 'none'
					});
					return;
				}
				resObj.defertImg = this.imgUrls.map(item=>item.url).join(',');
			}
				
			if (this.reasonTextStr.length <= 0) {
				delete resObj.defertDesc;
			}
				
			uni.showModal({
				title: '提示',
				content: this.reaType === 1 ? '是否确定提交调整原因' : '是否确定提交调整证明',
				success: (res) => {
					if (res.confirm) {
						updataAnnualSave(resObj).then(res=>{
							if (res.code === 200) {
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								});
								this.imgUrls = [];
								this.reasonTextStr = '';
								this.$refs.logPopup.close();
								this.initGetListLogs();
							}
						});
					}
				}
			});
		},
			
		changeImg(imgArr = []) {
			this.imgUrls = imgArr;
		},
		// 任务详情信息
		getPlanDetail() {
			return new Promise(resolve => {
				getPlanDetail({ planId: this.planId }).then(res => {
					this.planDetail = res.data;
					resolve();
				});
			});
		},
		initGetListLogs() {
			annualListLogs({
				planId:this.planId || '1582972521460334593',
				size:100,
			}).then(res=>{
				if (res.code === 200) {
					let list  = res.data.records || [];
					if (list.length > 0) {
						if (list[0].defertPlanDate) {
							this.defertPlanDate = list[0].defertPlanDate.substring(0,10).replaceAll('-','/');
								
							let num = '';
							let defertPlanDate = list[0].defertPlanDate.substring(0,10).replaceAll('-','/');
							let planDate = list[0].planDate.substring(0,10).replaceAll('-','/');
							if (new Date(defertPlanDate).getTime() / 1000 >= new Date(planDate).getTime() / 1000) {
								num =  new Date(defertPlanDate).getTime() / 1000 - new Date(planDate).getTime() / 1000;
								this.stateText = true;
							} else {
								this.stateText = false;
								num = new Date(planDate).getTime() / 1000 - new Date(defertPlanDate).getTime() / 1000;
							}
							this.dateDays = formatSeconds(num,0,false,1);// 计算初始时间和当前任务时间
						}
						if (list[0].defertType === 4) {// 特殊延期
							this.defertType = list[0].defertType;
						}
						this.dataArray = list.map((item)=>{
							return {
								...item,
								defertTypeName:['初始计划','提前保养','延期保养','延期保养','特殊延期'][item.defertType]
							};
						});
					}
				}
			});
		}
	}
			
};
</script>

<style>
	page{
		background: #f3f6f8;
	}
</style>
<style lang="scss" scoped>
	%widthPage{
		width: 680rpx;
		margin: 0 auto;
	}
	@mixin fontColors($px,$count,$colour) {
		font-size: $px;
		font-weight: $count;
		color: $colour;
	}
	.wrapper_top{
		background-color: #fff;
		padding:20rpx;
		
		.top_textDow{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.textDow1{
				@include fontColors(28rpx,600,#333);
			}
			.textDow2{
				@include fontColors(32rpx,600,#0091ff);
				margin: 10rpx 0;
			}
			.textDow3{
				@include fontColors(26rpx,400,#333);
				text{
					margin-left: 10rpx;
					font-size: 26rpx;
					color: #fa6400;
				}
			}
		}
	}
	.top_text{
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
		.text_L{
			flex: 0 0 90rpx;
			font-size: 24rpx;
			color: #666;
			image{
				width: 32rpx;
				height: 32rpx;
				vertical-align: bottom;
			}
		}
		.text_R{
			flex: 1;
			font-size: 24rpx;
			color: #666;
			
			.text_year{
				display: inline-block;
				font-size: 24rpx;
				color: #666;
				border-left: 2rpx #ccc solid;
				border-right: 2rpx #ccc solid;
				padding: 0 10rpx;
				margin: 0 10rpx;
			}
		}
		.nowap{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	
	.step_log{
		width: 710rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		.log_tit{
			display: flex;
			margin: 20rpx 0 20rpx 20rpx;
			.tit1{
				flex: 0 140rpx;
				@include fontColors(26rpx,400,#999);
				margin-left: 60rpx;
			}
			.tit2{
				flex: 1;
				@include fontColors(26rpx,400,#999);
				margin-left: 20rpx;
			}
		}
		.step_empty{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 600rpx;
			font-size: 26rpx;
			color: #999999;
			image{
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
	
	.calendarEdit{
		background-color: #fff;
		height: 694rpx;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		position: relative;
		.edit_bor {
			width: 100%;
			padding: 20rpx 0;
			.down-btn {
				width: 64rpx;
				height: 10rpx;
				background: #d8d8d8;
				border-radius: 6rpx;
				margin: 0 auto;
			}
		}
		.edit_content{
			width: 680rpx;
			margin: 0 auto;
			.content_tit{
				@include fontColors(32rpx,600,#333);
				margin-bottom: 20rpx;
			}
			.content_texts{
				margin-bottom: 30rpx;
				text{
					font-size: 28rpx;
					font-weight: 600;
					color: #333333
				}
				text:nth-of-type(2){
					color: #0091ff;
					// color: #e02020;
				}
			}
			.content_lines{
				border-bottom: 2rpx #eee solid;
				
			}
			.calendar_reason{
				border-radius: 16rpx;
				background-color: #FFFFFF;
				margin-top: 20rpx;
				.reason_img{
					.title{
						@include fontColors(28rpx,600,#333);
					}
					
					.remarks{
						width: 94%;
						padding: 20rpx;
						height: 208rpx;
						border: 2rpx solid #e9e9e9;
						border-radius: 4rpx;
						position: relative;
						padding-bottom: 30rpx;
						textarea {
							font-size: 28rpx;
							width: 100%;
							height: 208rpx;
						}
						.length {
							text-align: right;
							color: #ccc;
							position: absolute;
							right: 10rpx;
							font-size: 2;
							font-size: 24rpx;
							bottom: 5rpx;
						}
					}
					
					.parts_img{
						margin-top: 20rpx;
					}
				}
			}
		}
		
	}
	.BA_item_botm{
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    // z-index: 9;
	    height: 98rpx;
	    display: flex;
	    align-items: center;
	    width: 100%;
	    background: #fff;
		.botm{
			width: 720rpx;
			margin: 0 auto;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}
		.botms{
			background: #efefef;
			color: #cccccc;
		}
	}
	.calendar_btt{
		position: absolute;
	}
</style>
